<template>
  <t-head-menu default-value="dashboard" expand-type="popup">
    <template #logo>
      <img height="28" src="@/assets/image.png" alt="logo" />
    </template>
    <t-menu-item value="dashboard" to="/"> 概览 </t-menu-item>
    <t-submenu value="1" :title="statusStore.currentServerName || '选择服务器'">

      <t-menu-item :value="item.id" :to="`/server/${item.id}/overview`" v-for="(item, index) in statusStore.serverList"
        :key="index">{{ item.name }}</t-menu-item>

    </t-submenu>

    <template #operations>

      <t-button variant="text" shape="square" v-show="statusStore.displayMode === 'light'"
        @click="statusStore.displayMode = DisplayMode.Dark">
        <template #icon><t-icon name="mode-light" /></template>
      </t-button>
      <t-button variant="text" shape="square" v-show="statusStore.displayMode === 'dark'"
        @click="statusStore.displayMode = DisplayMode.Light">
        <template #icon><t-icon name="mode-dark" /></template>
      </t-button>

      <!-- <t-button variant="text" shape="square">
        <template #icon><t-icon name="search" /></template>
      </t-button> -->
      <t-button variant="text" shape="square">
        <template #icon><t-icon name="mail" /></template>
      </t-button>
      <t-button variant="text" shape="square" @click="router.replace('/user/info')">
        <template #icon><t-icon name="user" /></template>
      </t-button>
      <!-- <t-button variant="text" shape="square">
        <template #icon><t-icon name="ellipsis" /></template>
      </t-button> -->
    </template>
  </t-head-menu>
</template>

<script setup lang="ts">
import { useStatusStore } from '@/stores'
import { useRouter } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import { DisplayMode } from '@/types'
import axios from 'axios'
const statusStore = useStatusStore()
const router = useRouter()

onMounted(() => {
  axios.post('/api/broadcast_command?command=collect_server_status')
    .then((response) => {
      console.log(response.data)
      for (let item in response.data) {
        console.log(item);
        response.data[item].message = JSON.parse(response.data[item].message)
        statusStore.serverList.push({ id: item, name: response.data[item].message.node_name,ipaddr: response.data[item].message.ipv4})
      }
    }).catch((err) => {
      console.error('[TopBar]Error Getting ServerList: ', err)
    })
})

// 设置浅色、深色模式
watch(
  () => statusStore.displayMode,
  (newVal) => {
    if (newVal === 'dark') {
      document.documentElement.setAttribute('theme-mode', DisplayMode.Dark)
    } else {
      document.documentElement.removeAttribute('theme-mode')
    }
  },
)
</script>

<style scoped>
.t-menu__operations {
  .t-button {
    margin-left: 8px;
  }
}
</style>
